<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/nor.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/html2canvas.min.js"></script>
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="logo">yixiu</div>
        <h3>一修</h3>
    </header>
    <div class="nav">
        <h4>文案图片生成器</h4>
    </div>
    <!-- 文本1 -->
    <div class="search clearfix">
        <div class="search_text fl">文本1：</div>
        <div class="search_inp text_inp1 fl">
            <input type="text" class="" placeholder="输入你想生成的文字" />
        </div>
    </div>
    <!-- 文本2 -->
    <div class="search clearfix">
        <div class="search_text fl">文本2：</div>
        <div class="search_inp text_inp2 fl">
            <input type="text" class="" placeholder="输入你想生成的文字" />
        </div>
    </div>
    <!-- 生成按钮区域 -->
    <div class="create_img">
        <img src="images/gallery.png" alt="图片生成器" srcset="">
        <span>生成</span>
    </div>
    <!-- 图片内容编辑区域 -->
    <div class="cont_img">
        <div class="text1">愿你三冬暖，愿你春不寒</div>
        <div class="imgs"><img src="images/bg.jpg"></div>
        <div class="text2">happy every a day</div>
    </div>
    <!-- 上传按钮 -->
    <div class="upload">
        <p>请上传你的一张照片</p>
        <input type="file" name="" id="js_upload">
    </div>

    <script>
        let text_inp1 = document.querySelector('.text_inp1>input');
        let text_inp2 = document.querySelector('.text_inp2>input');
        let text1 = document.querySelector('.text1');
        let text2 = document.querySelector('.text2');

        // 修改文字函数
        function changeText(odj,addEle){
            console.log(odj);
            let text = document.querySelector(`.${odj}>input`).value;
            console.log(text);
            document.querySelector(`.${addEle}`).innerHTML = text;
        }

        // text_inp1 文本框的失去焦点事件
        text_inp1.onblur = function(){
            if(document.querySelector('.text_inp1>input').value == '') return;
            changeText('text_inp1','text1');
            document.querySelector('.text_inp1>input').value = '';
        }

        // text_inp2 文本框的失去焦点事件
        text_inp2.onblur = function(){
            if(document.querySelector('.text_inp2>input').value == '') return;
            changeText('text_inp2','text2');
            document.querySelector('.text_inp2>input').value = '';
        }
        // base64转换blob文件对象
        function dataURLtoFile(dataurl, filename){
            let arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr],{type:mime});
        }
        // upload 上传图片
        let upload = document.getElementById('js_upload');
        upload.onchange = function(){
            let files = upload.files[0];
            let reader = new FileReader();
            // 通过readAsDataURL读取图片
            reader.readAsDataURL(files);
            // 图片流加载
            reader.onload = function(res){
                // res.target.result 文件流返回的地址
                let imgsrc = URL.createObjectURL(dataURLtoFile(res.target.result));
                // imgs 展示位置
                let imgs = document.querySelector('.imgs>img');
                imgs.src = imgsrc;
            } 
        }

        //  html2canvas
        let cont_img = document.querySelector('.cont_img');
        // 参数
        let c_width = cont_img.clientWidth,
            c_height = cont_img.clientHeight;
        // 屏幕像素比
        let dpr = window.devicePixelRatio || 2;
        let opts = {
            scrollx:0,
            scrolly:-5,
            scale: dpr,
            logging:false,
            useCORS:true,
            allowTaint:false
        }
        let create_img = document.querySelector('.create_img');
        create_img.onclick = function(){
            setTimeout(function(){
                html2canvas(cont_img,opts).then(function(canvas){
                    document.body.appendChild(canvas);
                });
            },1000)
        }
    </script>
</body>
</html>